<template>
    <div class="total">
        <main>
            <router-view />
        </main>
        <footer>
            <router-link to="/total/home">
                <span class="iconfont icon-zhuye1"></span>
                <span>首页</span>
            </router-link>
            <router-link to="/total/order">
                <span class="iconfont icon-dingdanjihe"></span>
                <span>订单</span>
            </router-link>
            <router-link to="/total/customer">
                <span class="iconfont icon-kefu"></span>
                <span>客服</span>
            </router-link>
            <router-link to="/total/my">
                <span class="iconfont icon-31wode"></span>
                <span>我的</span>
            </router-link>

        </footer>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.total {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.total main {
    flex: 1;
    overflow-y: scroll;
}

.total footer {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;

    a {
        height: 100%;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;

        span:nth-child(1) {
            font-size: 18px;
        }
    }

    .router-link-active {
        color: red;
    }
}
</style>